import "../static/libs/flexible"
import "../scss/common.scss"
import "../scss/collection.scss"
import http from "../utils/http"

//页码
let selectedIndex = 0
//本地储存的学生id
const { _id } = JSON.parse(localStorage.getItem("userInfo") || "{}")
//题数组
let exercises = []

async function main() {
    const data = await http({ url: "/collections/?id=" + _id })
    exercises = data.data
    //渲染题
    renderExercises()

    //点击删除
    deleteExercise()

    //翻页
    fanye()

    //点击返回
    backPage()
}
main()

//渲染题
function renderExercises() {
    //答案转化的数据
    const str = ["A", "B", "B", "C"]
    $(".bigbox main").html(`
        <div class="title">
            <p>${exercises[selectedIndex].exerciseId.answer.length == 1 ? '单选题' : '多选题'}</p>
            <span>${exercises[selectedIndex].exerciseId.topics}</span>
        </div>
        <div class="option">
            <input type="radio" name="name"><label>${exercises[selectedIndex].exerciseId.options[0]}</label><br>
            <input type="radio" name="name"><label>${exercises[selectedIndex].exerciseId.options[1]}</label><br>
            <input type="radio" name="name"><label>${exercises[selectedIndex].exerciseId.options[2]}</label><br>
            <input type="radio" name="name"><label>${exercises[selectedIndex].exerciseId.options[3]}</label><br>
        </div>
        <div class="answer">
            <p>正确答案: ${str[exercises[selectedIndex].exerciseId.answer[0]]}</p>
            <p>答案解析：${exercises[selectedIndex].exerciseId.analysis}</p>
        </div>
        `)
    //右下角题数渲染
    renderExercisesCounts(exercises)
}

//翻页
function fanye() {
    //第一次触碰的焦点 ，最后触碰的焦点 ，滑动距离
    let startX, endX, dis = 0;
    //获取第一次触碰屏幕的焦点startx的事件
    document.addEventListener('touchstart', function (e) {
        var touch = e.touches[0];
        startX = touch.pageX;
    })

    //获取最后触摸的焦点endx , 算出滑动屏幕的距离dis的事件
    document.addEventListener('touchmove', function (e) {
        var touch = e.touches[0];
        endX = touch.pageX;
        dis = startX - endX;
    })

    //滑动事件结束 如果手指滑动距离大于200 并且正向则执行pageTop函数 -->向上滑动翻页
    //滑动事件结束 如果手指滑动距离大于200 方向为负则执行pageDown函数 -->向下滑动翻页
    //翻页完毕 执行qingling函数 进行数值清零
    document.addEventListener('touchend', function (e) {
        //Math.abs 返回绝对值
        if (Math.abs(dis) > 200) {
            if (dis > 0) {
                if (selectedIndex >= exercises.length - 1) alert("这是最后一题")
                else {
                    //渲染下一题
                    selectedIndex++
                    //渲染题
                    renderExercises()

                }
            } else {
                if (selectedIndex <= 0) alert("这是第一题")
                else {
                    //渲染上一题
                    selectedIndex--
                    //渲染题
                    renderExercises()
                }
            }
        }
        //归零
        reset()
    })
    //坐标归零
    function reset() {
        startX = 0
        endX = 0
        dis = 0
    }

    //翻页点击事件
    //下一页
    $("header .sp2").on("click", function () {
        if (selectedIndex >= exercises.length - 1) alert("这是最后一题")
        else {
            //渲染下一题
            selectedIndex++
            //渲染题
            renderExercises()
        }
        //归零
        reset()
    })
    //上一页
    $("header .sp1").on("click", function () {
        if (selectedIndex <= 0) alert("这是第一题")
        else {
            //渲染上一题
            selectedIndex--
            //渲染题
            renderExercises()
        }
        //归零
        reset()
    })
}

//右下角题数渲染
function renderExercisesCounts() {
    $("footer .four span").html(`
    <strong>${selectedIndex + 1}</strong>/${exercises.length}
    `)
    //渲染题目列表
    renderExercisesList(exercises)
}

//点击右下角题数弹出题目列表
function renderExercisesList() {
    $("footer .four").on("click", function () {
        $(".grayy").css("display", "block")
        $(".grayy .four span").html(`<strong>${selectedIndex + 1}</strong>/${exercises.length}`)
        $(".grayy .danxuan p").html(`单选题(共${exercises.length}题,合计${exercises.length * 3}分)`)
        //渲染题号
        renderExerciseNumber(exercises)
        //滑动隐藏题目列表
        displayExercisesList()
    })
}

//滑动或点击隐藏题目列表
function displayExercisesList() {
    let startY, endY, disss = 0
    //获取第一次触碰屏幕的焦点startY的事件
    document.addEventListener('touchstart', function (e) {
        var touch = e.touches[0];
        startY = touch.pageY;
    })

    //获取最后触摸的焦点endY , 算出滑动屏幕的距离dis的事件
    document.addEventListener('touchmove', function (e) {
        var touch = e.touches[0];
        endY = touch.pageY;
        disss = startY - endY;
    })

    document.addEventListener('touchend', function (e) {
        //Math.abs 返回绝对值
        if (Math.abs(disss) > 200) {
            if (disss > 0) {

            } else {
                $(".grayy .list").addClass("fade")
                setTimeout(function () {
                    $(".grayy .list").removeClass("fade")
                    $(".grayy").css("display", "none")
                }, 300)
            }
        }
        //清零
        resetList()
    })
    //清零
    function resetList() {
        startY = 0
        endY = 0
        disss = 0
    }

    $(".grayy .on .three p").on("click", function () {
        $(".grayy .list").addClass("fade")
        setTimeout(function () {
            $(".grayy .list").removeClass("fade")
            $(".grayy").css("display", "none")
            resetList()
        }, 300)
    })
}

//渲染题号
function renderExerciseNumber() {
    let tempArr = ``
    for (let i = 0; i < exercises.length; i++) {
        //判断该题是否被收藏
        tempArr += `<div class="one"> ${i + 1} </div>`
    }
    $(".grayy .danxuan .tihao").html(tempArr)
    //点击题目列表的题号，定位到该题
    clickExerciseNumLocate(exercises)
}

//点击题目列表的题号，定位到该题
function clickExerciseNumLocate() {
    $(".grayy .danxuan .one").on("click", function () {
        //调用渲染题的方法，参数为题目对象参数
        selectedIndex = $(this).text().trim() - 1
        //控制题目列表的页码
        $(".grayy .four span").html(`<strong>${selectedIndex + 1}</strong>/${exercises.length}`)
        $(".grayy .danxuan p").html(`单选题(共${exercises.length}题,合计${exercises.length * 3}分)`)
        //渲染题目信息
        //重新渲染题
        renderExercises()
    })
}

//点击删除按钮
function deleteExercise() {
    $("footer .two , .grayy .on .two").on("click", async function () {
        //删除数据库该收藏试题
        http({
            url: "/collections/deleteCollection",
            method: "POST",
            data: {
                studentId: _id,
                exerciseId: exercises[selectedIndex].exerciseId._id
            }
        })
        const data2 = await http({ url: "/collections/?id=" + _id })
        exercises = data2.data
        selectedIndex = 0
        //重新渲染题
        renderExercises()
    })
}

//点击返回
function backPage() {
    //返回按钮
    $("footer .three p").on("click", function () {
        window.history.back()
    })
    //头部返回按钮
    $("header img").on("click", function () {
        window.history.back()
    })
}